// 岗位详情  positionId岗位id
<template>

    <div class="radius-container" v-if="isShow =='1'">
        <div class="border-b pad-10 font-w font-15 topbar-style">结算分配</div>
        <div class="pad-20">
          <el-form :model="form" label-width="100px" :rules="rules" ref="form" class="pad-t-15">
            <el-form-item label="录用人数：" prop="hireNumType" v-show="showHireNumFlag">
              <div class="noraml-height">
                  <!-- <div>aa -- {{ form.hireNumType }}</div>
                  <div>11 -- {{ dictData }}</div> -->
                  <!-- <div>22 -- {{ dict.hireNumType }}</div> -->
                  <el-radio-group  v-model="form.hireNumType">
                      <template v-for="(value,key) in dictData.hireNumType">
                         <el-radio :label="key">{{value}}</el-radio>
                      </template>
                  </el-radio-group>

                <el-input v-show="form.hireNumType==2" v-model="form.hireNum" prop="hireNum" placeholder="请输入内容" class="el-input" min="2"
                          onKeyUp="value=value.replace(/\D/g,'')" onchange="value=value.replace(/\D/g,'')">
                    <template slot="append">人</template>
                </el-input>
              </div>
            </el-form-item>

            <el-form-item label="验收标准：" prop="acceptanceContents">
                <el-input v-model="form.acceptanceContents" placeholder="请输入验收内容，例如：设计后两日支付" class="el-input" style="width:500px"/>
            </el-form-item>


            <div v-if="remunerationType == 2">

                <el-form-item label="结算方式：" prop="settleType">
                    <el-radio-group v-model="form.settleType">
                        <template v-for="(value,key) in dictData.settleType">
                            <el-radio :label="key">{{value}}</el-radio>
                        </template>
                    </el-radio-group>
                </el-form-item>

                <template v-if="form.settleType==2" >

                    <template v-for="(stage,index) in stageList">
                        <el-form-item label-width="150px"  v-bind:label="'第' + (index + 1) + '阶段'">
                            <el-input placeholder="请输入内容" class="el-input" v-model="stage.stageName"></el-input>
                            <el-date-picker
                                    v-model="stage.acceptDate"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    default-time="23:59:59">
                            </el-date-picker>


                            <el-input  placeholder="支付金额" class="el-input" v-model="stage.acceptAmount" type="number" min="0"></el-input>元
                            <el-input v-model="stage.sortNo" :value="index+1" type="hidden"></el-input>
                        </el-form-item>

                    </template>
                </template>

                <template v-if="form.hireNumType==2">
                    <el-form-item label="分配方式：" prop="levelType">
                        <div class="bg-gray">
                            <div class="flex pad-b-5">
                                <label class="flex-item font-normal">您当前设置的任务总酬金为 <span class="font-red font-w">{{budgetAmount}}</span> 元</label>
                                <template v-if="isShowLevelLabel && isShowLevelNum">
                                    <label class="font-normal font-red" >温馨提示：分配人数之和必须等于录用人数，分配酬金之和必须等于总酬金</label>
                                </template>
                                <template v-else-if="isShowLevelLabel">
                                    <label class="font-normal font-red">温馨提示：分配酬金之和必须等于总酬金</label>
                                </template>
                                <template v-else-if="isShowLevelNum">
                                    <label class="font-normal font-red" >温馨提示：分配人数之和必须等于录用人数</label>
                                </template>
                            </div>
                            <div v-for="(level,index) in levelList" class="flex v-align-c">

                                <el-input v-if="index==0" placeholder="一等奖、等级A、高级设计师" class="el-input pad-b-10 mar-r-15 input-level-1" v-model="level.levelName"></el-input>
                                <el-input v-if="index==1" placeholder="二等奖、等级B、中级设计师" class="el-input pad-b-10 mar-r-15 input-level-1" v-model="level.levelName"></el-input>
                                <el-input v-if="index==2" placeholder="三等奖、等级C、初级设计师" class="el-input pad-b-10 mar-r-15 input-level-1" v-model="level.levelName"></el-input>

                                <el-input placeholder="人数"  v-model="level.levelNum" type="number" min="1" class="el-input pad-b-10 mar-r-15 input-level-2" @change="changeLevelNum()">
                                    <template slot="append">人</template>
                                </el-input>
                                <el-input placeholder="该等级分配的金额" class="el-input pad-b-10 mar-r-15 input-level-3" v-model="level.levelAmount" type="number" min="0" @change="changeLevelAmount()">
                                    <template slot="append">元</template>
                                </el-input>
                                <label class="input-level-pernum flex-row">
                                    <label class="font-normal font-gray" >平均每人获得<span class="pad-l-10 pad-r-10 font-blue">
                                        <template v-if="level.levelAmount!='' && level.levelAmount !=0 && level.levelNum!='' && level.levelNum!=0">
                                            {{level.levelAmount /  level.levelNum | levelRecordFilter }}
                                        </template>
                                        <template v-else>
                                            0
                                        </template>
                                    </span>元</label>
                                    <label><el-input v-model="level.sortNo" :value="index++" type="hidden" class="width-10"></el-input></label>
                                </label>
                            </div>
                        </div>

                    </el-form-item>
                </template>
            </div>


            <el-form-item label="内部微客酬金折扣比例：" label-width="180px" prop="internalRatio">
              <div class="noraml-height">
                <el-switch v-model="form.internalRatioFlag"></el-switch>
                <template v-if="form.internalRatioFlag">
                  <el-input placeholder="请输入酬金比例"
                    v-model="form.internalRatio" class="input-bar-0 mar-l-10" min="0">
                    <template slot="append">%</template>
                  </el-input>
                  例如：输入50%，微客获得酬金1000X50%
                </template>
              </div>
            </el-form-item>


            <el-form-item label="支付周期："  prop="payCycleType">
              <el-select v-model="form.payCycleType" placeholder="请选择" class="mar-r-10">
                  <el-option v-for="(value,key) in dictData.payCycleType" :key="key" :label="value" :value="key">
                  </el-option>
              </el-select>

              <el-select v-model="form.payDay1" v-if="form.payCycleType==2" placeholder="请选择">
                <el-option  key="1" label="周一" value="1"> </el-option>
                <el-option  key="2" label="周二" value="2"> </el-option>
                <el-option  key="3" label="周三" value="3"> </el-option>
                <el-option  key="4" label="周四" value="4"> </el-option>
                <el-option  key="5" label="周五" value="5"> </el-option>
                <el-option  key="6" label="周六" value="6"> </el-option>
                <el-option  key="7" label="周日" value="7"> </el-option>
              </el-select>

              <el-input v-model="form.payDay2" v-if="form.payCycleType==3" class="date-input-with" placeholder="请输入日期" size="mini">
                <template slot="prepend">每月</template>
                <template slot="append">号</template>
              </el-input>
            </el-form-item>

          </el-form>
        </div>
    </div>
</template>

<script>
  import { getDictByGroupName } from '@/api/common/common'

  export default {
    props: {
      dictData: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        form: {
          hireNumType: '1',
          settleType: '1',
          hireNum: '2',
          payCycleType: '1',
          oneLevelName: '等级一',
          levelType: '1', // 无用字段，
          acceptanceContents: '',
          internalRatio: '',
          internalRatioFlag: false,
          payDay1: '',
          payDay2: ''
        },
        remunerationType: '1', // 任务酬金类型
        stageList: [],
        levelList: [],
        rules: {
          hireNumType: [
            { required: true, message: '录用人数', trigger: 'blur' }
          ],
          payCycleType: [
            { required: true, message: '支付周期', trigger: 'blur' }
          ],
          settleType: [
            { required: true, message: '结算方式', trigger: 'blur' }
          ],
          levelType: [
            { required: true, message: '分配方式', trigger: 'blur' }
          ],
          acceptanceContents: [
            { required: true, message: '验收内容', trigger: 'blur' }
          ],
          payDay2: [
            { required: true, message: '请正确输入日期', trigger: 'blur' },
            { pattern: /(^([1-9]|[0-2][0-9]|3[0-1])$)/, message: '请正确输入日期' }
          ],
          internalRatio: [
            { required: false, message: '请输入内部微客酬金折扣比例', trigger: 'blur' },
            { pattern: /(^(\d|[1-9]\d|100)(\.\d{1,2})?$)/, message: '请输入正确内部微客酬金折扣比例' }
          ]
        },
        dict: {},
        isShow: '1',
        budgetAmount: 0,
        isShowLevelLabel: false,
        isShowLevelNum: false,
        showHireNumFlag: true
      }
    },
    // 初始化页面
    created() {
      this.initDict()
    },
    mounted() {
      const that = this
      // 初始化数据
      this.initListener()
      // 初始化阶段列表
      this.initStageList()
      this.initLevelList()
      // 监听数据字典
      this.$bus.$on('task.edit.dict', function(data) {
        that.dict = data
      })
    },
    filters: {
      levelRecordFilter(e) {
        return e.toFixed(2)
      }
    },
    methods: {
      initDict() {
        getDictByGroupName('EnterpriseAgentDTO').then(response => {
          this.dict = response.data
        })
      },
      initListener() {
        const that = this
        // 任务酬金类型
        this.$bus.$on('project.task.edit.remunerationType', function(newVal) {
          that.remunerationType = newVal
        })
        // 任务类型
        this.$bus.$on('project.task.edit.taskType', function(data) {
          const taskType = data + ''
          if (taskType === '1') {
            that.isShow = '1'
          } else { // 协同任务
            that.isShow = '0'
          }
        })
        // 获取任务数据
        this.$bus.$on('project.task.edit.taskData', function(taskData) {
          const hireNumType = taskData.hireNumType + ''
          const payCycle = taskData.payCycle + ''
          const remunerationType = taskData.remunerationType + ''
          that.form.hireNumType = hireNumType
          that.form.payCycleType = payCycle
          that.form.acceptanceContents = taskData.acceptanceContents
          that.form.internalRatio = that.$utils.isExist(taskData.internalRatio) ? taskData.internalRatio + '' : ''
          if (taskData.internalRatioFlag === 1) {
            that.form.internalRatioFlag = true
          } else {
            that.form.internalRatioFlag = false
          }
          if (hireNumType + '' === '2') {
            that.form.hireNum = taskData.hireNum
          }
          if (that.form.payCycleType === '2') {
            that.form.payDay1 = taskData.payDay + ''
          }
          if (that.form.payCycleType === '3') {
            that.form.payDay2 = taskData.payDay + ''
          }
          that.initLevelList()
          if (remunerationType === '2') {
            if (hireNumType === '2') {
              that.levelList = taskData.levelList
            } else {
              that.form.oneLevelName = taskData.levelList[0].levelName
            }
          }
          // that.levelList = taskData.levelList
          that.stageList = taskData.stageList
          // 判读是否显示下面录用人数
          if (this.remunerationType === 1 && this.remunerationTypeModel === 12) {
            that.showHireNumFlag = false
          }
        })
        this.$bus.$on('project.task.edit.budgetAmount', function(budgetAmount) {
          that.budgetAmount = budgetAmount
          if (this.remunerationType === '2') {
            var array = this.levelList
            for (let i = 0; array.length; i++) {
              if (array[i].sortNo === 1) {
                array[i].levelAmount = budgetAmount
              }
            }
            this.levelList = array
          }
        })
        that.$bus.$on('project.task.edit.remunerationTypeModel', function(result) {
          if (result) {
            that.showHireNumFlag = false
          } else {
            that.showHireNumFlag = true
          }
        })
      },
      // 初始化阶段列表
      initStageList() {
        const array = []
        for (var i = 1; i < 4; i++) {
          const object = {}
          object.sortNo = i
          object.stageName = ''
          object.acceptDate = ''
          object.acceptAmount = ''
          array.push(object)
        }
        this.stageList = array
      },
      // 初始化分配方式
      initLevelList() {
        const array = []
        for (var i = 1; i < 4; i++) {
          const object = {}
          object.sortNo = i
          object.levelName = ''
          object.levelNum = ''
          object.levelAmount = ''
          array.push(object)
        }
        this.levelList = array
      },
      // 更改顶级金额监听
      changeLevelAmount() {
        let amount = 0
        this.levelList.forEach(level => {
          amount = amount * 1 + level.levelAmount * 1
        })
        if (amount * 1 !== this.budgetAmount * 1) {
          this.isShowLevelLabel = true
        } else {
          this.isShowLevelLabel = false
        }
      },
      changeLevelNum() {
        let num = 0
        this.levelList.forEach(level => {
          num = num * 1 + (level.levelNum * 1)
        })
        if (num * 1 !== this.form.hireNum * 1) {
          this.isShowLevelNum = true
        } else {
          this.isShowLevelNum = false
        }
      },
      checkForm() {
        // 需要校验的集合
        const checkArrays = []
        checkArrays.push('hireNumType')
        checkArrays.push('payCycleType')
        checkArrays.push('settleType')
        checkArrays.push('levelType')
        checkArrays.push('acceptanceContents')
        checkArrays.push('payDay2')
        checkArrays.push('internalRatio')

        let ret = true
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            this.$message.error(valid)
            ret = false
          }
        })
        return ret
      }
    },
    computed: {
      oneLevelNameWatch() {
        return this.form.oneLevelName
      },
      hireNumWatch() {
        return this.form.hireNum
      },
      levelListWatch() {
        return this.form.levelList
      },
      payDay2Watch() {
        return this.form.payDay2
      }
    },
    watch: {
      oneLevelNameWatch(val) {
        var array = this.levelList
        for (let i = 0; i < array.length; i++) {
          if (array[i].sortNo === 1) {
            array[i].levelAmount = this.budgetAmount
            array[i].levelNum = '1'
            array[i].levelName = val
          }
        }
        this.levelList = array
      },
      // 多人监听
      hireNumWatch(val) {
        if (val === null || val === '') {
          return
        }

        var patt = new RegExp('^[0-9]*[1-9][0-9]*$')
        var result = patt.test(val)
        this.$nextTick(function() {
          if (result) {
            if (val * 1 >= 100) {
              this.form.hireNum = 100
            } else {
              this.form.hireNum = val
            }
          } else {
            this.form.hireNum = 2
          }
          this.$forceUpdate()
        })
      },
      payDay2Watch(val) {
        if (val === null || val === '') {
          return
        }

        var patt = new RegExp('^([1-9]|[0-2][0-9]|3[0-1])$')
        var result = patt.test(val)
        this.$nextTick(function() {
          if (result) {
            // this.form.payDay2
            if (val * 1 > 31) {
              this.form.payDay2 = 31
              this.$forceUpdate()
            }
            if (val * 1 === 0) {
              this.form.payDay2 = 1
              this.$forceUpdate()
            }
          } else {
            this.form.payDay2 = ''
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
    .el-input{
        width:20%
    }
    .pay-data-input{
        width: 230px;
    }
    .bg-gray{
        background: #f5f5f5;
        display: inline-block;
        border-radius: 5px;
        padding: 10px 20px 20px 20px;
        width: 95%;
    }
    .input-level-1{
        width: 38%;
    }
    .input-level-2{
        width: 22%;
    }
    .input-level-3{
        width: 35%;
    }
    .input-level-pernum{
        min-width: 200px;
        padding-bottom: 10px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .main-transfer {
        width: 200px;
    }

    .main-transfer-title {
        background-color: #f5f7fa;
        height: 40px;
        font-size: 16px;
        padding-left: 20px;
    }

    .main-transfer-list {
        height: 260px;
        overflow-y: scroll;
    }
    .noraml-height{
        height: 40px;
    }
    .date-input-with{
        width: 225px!important;
    }
</style>
